<template>
	<view class="user pTab p20">
		<view class="userInfo dis">
			<view class="avatar" @click="goHomepage">
				<image v-if="!userInfo" src="/post/static/default_avatar.jpg" mode=""></image>
				<image v-else :src="userInfo?.user?.avatar" mode="aspectFill"></image>
			</view>
			<view class="userInfoC dis">
				<view class="infoTop dis">
					<view class="infoTopL dis">
						<view class="userName">{{ userInfo?.user?.nickname }}</view>
						<view class="userSchool">{{ SchoolData?.school?.departmentName }}</view>
					</view>
					<view class="infoTopR" @click="goSchool">
						切换学校
						<image class="infoTopRI" src="/static/switch.png" mode=""></image>
					</view>
				</view>
				<view class="userId dis">
					<view class="identity isApprove" v-if="isApprove != ''">{{ isApprove }}</view>
					<view class="identity admin" v-if="isMaster != ''">{{ isMaster }}</view>
					<view class="identity etc" v-if="isAdmin != ''">{{ isAdmin }}</view>
				</view>
			</view>
		</view>
		<!-- 会员 -->
		<view class="member">
			<view class="memberBG"></view>
			<view class="memberTop">
				<view class="memberTit dis">
					<image src="/static/icon-lv.png" mode=""></image>
					<text>{{ userInfo?.curUsergroup?.groupTitle }}</text>
				</view>
				<view class="memberTCon">
					<view class="memberTConCh" :style="sysWidth"></view>
				</view>
				<view class="memberTBot">
					<text class="memberTBotVal">当前积分：{{ userInfo?.userCount?.credit }}</text>
					<text class="memberTBotVal">
						还需{{ userInfo?.nextUsergroup?.credit }}分，可升为
						<text class="middle" @click="openLvFun">{{ userInfo?.nextUsergroup?.groupTitle }}</text>
					</text>
				</view>
			</view>
			<view class="memberList dis">
				<view class="memberItem dis" @click="goUserPost(1)">
					<view class="memberIT">{{ userInfo?.userCount?.threadNum + userInfo?.userCount?.postNum }}</view>
					<view class="memberIB">发帖</view>
				</view>
				<view class="memberItem" @click="goUserPost(2)">
					<view class="memberIT">{{ userInfo?.userCount?.likeNum }}</view>
					<view class="memberIB">点赞</view>
				</view>
				<view class="memberItem" @click="goUserPost(3)">
					<view class="memberIT">{{ userInfo?.userCount?.watchNum }}</view>
					<view class="memberIB">插眼</view>
				</view>
				<view class="memberItem" @click="goMyWallet">
					<view class="memberIT">{{ userInfo?.userCount?.balance }}</view>
					<view class="memberIB">钱包</view>
				</view>
			</view>
		</view>
		<view class="advertising">
			<template v-for="item in AdList" :key="item.id">
				<view class="advertisingItem p20 dis" @click="openAdvert(item)" :style="{ background: item.backgroundColor }">
					<image src="/static/wechatgroup.png" mode=""></image>
					<view class="adIText" :style="{ color: item.color }">{{ item.title }}</view>
					<view class="adIIcon">
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
			</template>
		</view>
		<view class="order p20">
			<view class="userTitle">订单</view>
			<view class="orderList p20 dis">
				<view class="orderItem dis" @click="goOrderList(0)">
					<view class="orderItemImg">
						<image src="/static/all-order.png" mode=""></image>
					</view>
					<view class="orderItemText">全部订单</view>
				</view>
				<view class="orderItem dis" @click="goOrderList(1)">
					<view class="orderItemImg">
						<image src="/static/due.png" mode=""></image>
					</view>
					<view class="orderItemText">待付款</view>
				</view>
				<view class="orderItem dis" @click="goOrderList(2)">
					<view class="orderItemImg">
						<image src="/static/refund.png" mode=""></image>
					</view>
					<view class="orderItemText">退款订单</view>
				</view>
			</view>
		</view>
		<view class="service p20">
			<view class="userTitle">服务</view>
			<view class="serviceList p20 dis">
				<view class="serviceItem dis" @click="goIdentity">
					<view class="serviceItemImg">
						<image src="/static/identity.png" mode=""></image>
					</view>
					<view class="serviceItemText">身份认证</view>
				</view>
				<view class="serviceItem dis" @click="setUser">
					<view class="serviceItemImg">
						<image src="/static/account-set.png" mode=""></image>
					</view>
					<view class="serviceItemText">账号设置</view>
				</view>
				<view class="serviceItem dis">
					<view class="serviceItemImg">
						<image src="/static/forum-rules.png" mode=""></image>
					</view>
					<view class="serviceItemText">论坛规则</view>
				</view>
				<view class="serviceItem dis" @click="goErr">
					<view class="serviceItemImg">
						<image src="/static/about-us.png" mode=""></image>
					</view>
					<view class="serviceItemText">关于我们</view>
				</view>
				<view class="serviceItem dis">
					<view class="serviceItemImg">
						<image src="/static/user-agreement.png" mode=""></image>
					</view>
					<view class="serviceItemText">用户协议</view>
				</view>
				<view class="serviceItem dis">
					<view class="serviceItemImg">
						<image src="/static/privacy-policy.png" mode=""></image>
					</view>
					<view class="serviceItemText">隐私政策</view>
				</view>
				<view class="serviceItem dis">
					<view class="serviceItemImg">
						<image src="/static/injunction-appeal.png" mode=""></image>
					</view>
					<view class="serviceItemText">封禁申诉</view>
				</view>
				<view class="serviceItem dis">
					<view class="serviceItemImg">
						<image src="/static/relation.png" mode=""></image>
					</view>
					<view class="serviceItemText">联系客服</view>
				</view>
				<view class="serviceItem dis" style="padding-left: 10rpx" @click="goAdmin">
					<view class="serviceItemImg">
						<image src="/static/workbenches.png" mode=""></image>
					</view>
					<view class="serviceItemText">工作台</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<custom-tabbar :activeIndex="current" :isHint="isTip" />
		<!-- 广告 -->
		<up-popup :show="show" :round="10" :closeable="true" mode="bottom" @close="close" @open="open">
			<view class="vPopup">
				<view class="popTile p20">{{ advertText }}</view>
				<view class="popImg">
					<view class="popImgDom p20">
						<image :src="adImg" show-menu-by-longpress="true" mode="aspectFit"></image>
					</view>
					<view class="popTextDom">长安上方二维码识别</view>
				</view>
			</view>
		</up-popup>
		<!-- 等级 -->
		<up-popup :show="showLv" mode="right" @close="closeLv" @open="openLv" :closeable="true">
			<view class="popLv">
				<view class="lvList">
					<view class="lvItem" :class="{ activeLv: lvNum >= 1 }">
						<view class="lvItemNum">1</view>
						<view class="lvItemConT">
							<view class="lvItemTitle">注册会员</view>
							<view class="lvItemCon">晋级所需积分：0</view>
						</view>
					</view>
					<view class="lvItem" :class="{ activeLv: lvNum >= 2 }">
						<view class="lvItemNum">2</view>
						<view class="lvItemConT">
							<view class="lvItemTitle">中级会员</view>
							<view class="lvItemCon">晋级所需积分：200</view>
						</view>
					</view>
					<view class="lvItem" :class="{ activeLv: lvNum >= 3 }">
						<view class="lvItemNum">3</view>
						<view class="lvItemConT">
							<view class="lvItemTitle">高级会员</view>
							<view class="lvItemCon">晋级所需积分：500</view>
						</view>
					</view>
					<view class="lvItem" :class="{ activeLv: lvNum >= 4 }">
						<view class="lvItemNum">4</view>
						<view class="lvItemConT">
							<view class="lvItemTitle">金牌会员</view>
							<view class="lvItemCon">晋级所需积分：1000</view>
						</view>
					</view>
					<view class="lvItem" :class="{ activeLv: lvNum >= 5 }">
						<view class="lvItemNum">5</view>
						<view class="lvItemConT">
							<view class="lvItemTitle">论坛元老</view>
							<view class="lvItemCon">晋级所需积分：3000</view>
						</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { getUserInfo, getSchoolInfo, getMessageTip, getAdList2, statisticsWebsitePVandUV, authorizedLogin } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import CustomTabbar from '@/components/custom-tabbar.vue';
const current = ref(4);
const schoolInfo = ref({});
// 查询是否有消息未读
const isTip = ref(0);
const getMessageTipFun = async () => {
	const res = await getMessageTip();
	if (res.code == 0) {
		isTip.value = res.data.unreadCount;
	}
};
onShow(() => {
	current.value = 4;
	getMessageTipFun();
	statisticsWebsitePVandUV();
});
onLoad((options) => {
	console.log(options);
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
	}
	getAdListFun();
	getUserInfoFun();
	getSchoolInfoFun();
});
// 获取学校信息
const SchoolData = ref({});
const getSchoolInfoFun = async () => {
	const res = await getSchoolInfo(schoolInfo.value.schoolId, {});
	console.log(res);
	if (res.code == 0) {
		SchoolData.value = res.data;
	}
};
// 用户信息
const userInfo = ref({});
const isApprove = ref('');
const isAdmin = ref('');
const isMaster = ref('');
const sysWidth = ref('width: 0%;');
const getUserInfoFun = async () => {
	const res = await getUserInfo();
	// console.log(res);
	if (res.code == 0) {
		userInfo.value = res.data;
		const BFB = (res.data.userCount.credit / res.data.nextUsergroup.credit) * 100;
		sysWidth.value = `width: ${BFB}%;`;
		res.data.userRoles.forEach((item) => {
			if (item.includes('用户')) {
				isApprove.value = item;
			}
			if (item.includes('管理员')) {
				isAdmin.value = item;
			}
			if (item.includes('站长')) {
				isMaster.value = item;
			}
		});
	}
};
const goSchool = () => {
	uni.navigateTo({
		url: '/pages/selectSchool/index'
	});
};

// 个人主页
const goHomepage = () => {
	uni.navigateTo({
		url: `/post/identity/homepage?id=${userInfo.value.user.id}`
	});
};

// 我的订单
const goErr = (num) => {
	uni.navigateTo({
		url: `/post/err/404`
	});
};
// 我的订单
const goOrderList = (num) => {
	uni.navigateTo({
		url: `/errand/orderList/orderList?index=${num}`
	});
};
// 工作台
const goAdmin = () => {
	uni.navigateTo({
		url: '/admin/index/index'
	});
};
//帖子列表
const goUserPost = (num) => {
	// 1发帖 2点赞 3插眼
	uni.navigateTo({
		url: `/post/post/userPost?type=${num}`
	});
};
// 钱包
const goMyWallet = () => {
	uni.navigateTo({
		url: '/post/user/myWallet'
	});
};
// 身份认证
const goIdentity = () => {
	uni.navigateTo({
		url: '/post/identity/identity'
	});
};
// 账号设置
const setUser = () => {
	uni.navigateTo({
		url: '/post/user/index'
	});
};
// 广告弹窗
const adImg = ref('');
const show = ref(false);
const advertType = ref(1);
const advertText = ref('添加微信群与群友互动');
const open = () => {};
const close = () => {
	show.value = false;
};
const openAdvert = (item) => {
	// console.log(item);
	uni.navigateTo({
		url: `/pages/adPages/adPages?id=${item.id}`
	});
	// advertType.value = val;
	// if (val == 1) {
	// 	adImg.value = SchoolData.value.school.schoolPeopleWall.imageUrl;
	// 	advertText.value = '添加微信群与群友互动';
	// } else {
	// 	adImg.value = SchoolData.value.school.schoolWechatGroup.imageUrl;
	// 	advertText.value = '添加万人墙与群友互动';
	// }
	// show.value = true;
};

// 查询广告列表
const AdList = ref([]);
const getAdListFun = async () => {
	const data = {
		type: '公告',
		position: '个人中心'
	};
	const res = await getAdList2(schoolInfo.value.schoolId, data);
	if (res.code == 0) {
		const newList = res.data.list.map((item) => {
			const defaultBackgroundColor = 'linear-gradient(90deg, #f3f4fd 0%, rgba(243, 244, 253, 0.5) 100%)';
			const defaultColor = '#97a0af';
			const isValidBackgroundColor = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(item.backgroundColor);
			const isValidColor = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(item.color);
			return {
				...item,
				backgroundColor: isValidBackgroundColor ? item.backgroundColor : defaultBackgroundColor,
				color: isValidColor ? item.color : defaultColor
			};
		});
		console.log(newList, '个人中心');
		AdList.value = newList;
	}
};

// 等级信息
const showLv = ref(false);
const lvNum = ref(3);
const openLv = () => {};
const closeLv = () => {
	showLv.value = false;
};
const openLvFun = () => {
	showLv.value = true;
};
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uview-plus/theme.scss';
.user {
	/* #ifdef MP-WEIXIN */
	padding-bottom: 110rpx;
	/* #endif */
}
.userInfo {
	padding: 10rpx 0;
	.avatar {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 60rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.userInfoC {
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		height: 100rpx;
		padding-left: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-style: normal;
		text-transform: none;
		.infoTop {
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.infoTopL {
				text-align: center;
				.userName {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.userSchool {
					margin-left: 16rpx;
					line-height: 45rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #7e8aa2;
				}
			}
			.infoTopR {
				position: relative;
				padding: 8rpx 16rpx;
				width: 168rpx;
				height: 50rpx;
				background: #f0f4ff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #4f77e0;
				.infoTopRI {
					position: absolute;
					top: 14rpx;
					right: 16rpx;
					width: 24rpx;
					height: 21rpx;
				}
			}
		}
		.userId {
			line-height: 40rpx;
			color: #ffffff;
			font-weight: 400;
			font-size: 20rpx;
			.identity {
				margin-right: 12rpx;
				padding: 0 16rpx;
				border-radius: 8rpx;
			}
			.isApprove {
				background: linear-gradient(266deg, #ffbc58 0%, #ff8540 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(255, 164, 78, 0.3);
			}
			.etc {
				background: linear-gradient(266deg, #70c747 0%, #5db365 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(106, 197, 82, 0.3);
			}
			.admin {
				background: linear-gradient(266deg, #4aaaf0 0%, #5c70d6 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(85, 139, 226, 0.3);
			}
		}
	}
}
.member {
	position: relative;
	margin: auto;
	margin-top: 25rpx;
	padding: 30rpx 40rpx;
	width: 670rpx;
	height: 290rpx;
	color: #ffffff;
	background: linear-gradient(225deg, #d1dcff 0%, #4c7ff7 100%);
	box-shadow: inset 0rpx 0rpx 10rpx 0rpx rgba(255, 255, 255, 0.7), 0rpx 22rpx 34rpx 0rpx rgba(119, 156, 249, 0.3);
	border-radius: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-style: normal;
	text-transform: none;
	.memberBG {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		width: 188rpx;
		height: 188rpx;
		background: #886fec;
		border-radius: 50%;
		opacity: 0.3;
		filter: blur(34.900001525878906px);
	}
	.memberTop {
		margin-bottom: 35rpx;
		.memberTit {
			image {
				width: 46rpx;
				height: 46rpx;
			}
			text {
				display: block;
				margin-left: 16rpx;
				height: 46rpx;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-size: 36rpx;
			}
		}
		.memberTCon {
			margin-top: 16rpx;
			width: 590rpx;
			height: 8rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			.memberTConCh {
				width: 100%;
				height: 8rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
		}
		.memberTBot {
			padding-top: 8rpx;
			font-weight: 400;
			font-size: 25rpx;
			.memberTBotVal {
				margin-right: 30rpx;
				.middle {
					color: #ffc590;
				}
			}
		}
	}
	.memberList {
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.memberItem {
			flex-direction: column;
			align-items: center;
			.memberIT {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
			}
			.memberIB {
				margin-top: 5rpx;
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
			}
		}
	}
}
.advertising {
	padding: 50rpx 20rpx;
	padding-bottom: 0rpx;
	.advertisingItem {
		position: relative;
		margin-bottom: 20rpx;
		width: 670rpx;
		background: linear-gradient(90deg, #f3f4fd 0%, rgba(243, 244, 253, 0.5) 100%);
		border-radius: 16rpx;
		image {
			width: 34rpx;
			height: 34rpx;
		}
		.adIText {
			padding-left: 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #97a0af;
		}
		.adIIcon {
			position: absolute;
			top: 23rpx;
			right: 40rpx;
		}
	}
}
.order {
	font-style: normal;
	text-transform: none;
	font-family: PingFang SC, PingFang SC;
	.userTitle {
		font-weight: bold;
		font-size: 32rpx;
	}
	.orderList {
		flex-wrap: wrap;
		gap: 40px;
		.orderItem {
			flex-direction: column;
			align-items: center;
			.orderItemImg {
				image {
					width: 66rpx;
					height: 66rpx;
				}
			}
			.orderItemText {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
}
.service {
	font-style: normal;
	text-transform: none;
	font-family: PingFang SC, PingFang SC;
	.userTitle {
		font-weight: bold;
		font-size: 32rpx;
	}
	.serviceList {
		flex-wrap: wrap;
		row-gap: 40rpx; /* 上下间距（行间距） */
		column-gap: 80rpx; /* 左右间距（列间距） */
		.serviceItem {
			flex-direction: column;
			align-items: center;
			.serviceItemImg {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.serviceItemText {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
}
.vPopup {
	height: 770rpx;
	.popTile {
		width: 100%;
		font-size: 30rpx;
		font-weight: 700;
		text-align: center;
	}
	.popImg {
		margin: auto;
		width: 510rpx;
		height: 600rpx;
		border-radius: 15rpx;
		border: 1px solid #07c160;
		overflow: hidden;
		.popImgDom {
			width: 100%;
			height: 520rpx;
			image {
				width: 100%;
			}
		}
		.popTextDom {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background: #07c160;
			text-align: center;
		}
	}
}
.popLv {
	padding-left: 35rpx;
	padding-top: 100rpx;
	width: 50vw;
	.lvList {
		width: 100%;
		.lvItem {
			position: relative;
			padding-left: 35rpx;
			width: 100%;
			height: 150rpx;
			border-left: 1px solid #959fb1;
			.lvItemNum {
				position: absolute;
				top: -25rpx;
				left: -22.5rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #959fb1;
				font-size: 24rpx;
				text-align: center;
				border-radius: 50%;
				background-color: #959fb1;
			}
			.lvItemConT {
				position: absolute;
				top: -25rpx;
				left: 35rpx;
				width: 90%;
				height: 150rpx;
				.lvItemTitle {
					color: #909ca4;
					font-size: 24rpx;
				}
				.lvItemCon {
					margin-top: 20rpx;
					color: #909ca4;
					font-size: 28rpx;
				}
			}
		}
		.lvItem:last-child {
			border-left: none !important;
		}
		.activeLv {
			border-left: 1px solid #fa2c19;
			.lvItemNum {
				color: #fff !important;
				background-color: #fa2c19 !important;
			}
			.lvItemConT {
				.lvItemCon {
					color: #000 !important;
				}
			}
		}
	}
}
</style>
